<template>
  <div class="max-box">
    <!-- 头部搜索、操作 -->
    <div class="header-box">
      <div class="header-left">
        <span>对比</span>
      </div>
      <!-- <a-input-search
        placeholder="输入对比名称"
        @search="onSearch"
        allow-clear
        class="search-box"
      >
        <a-button slot="enterButton" icon="search"></a-button>
      </a-input-search> -->
      <a-button type="primary" class="add-btn" @click="openTopDrawer"
        >添加新对比</a-button
      >
    </div>
    <!-- 内容区 -->
    <div class="content-box">
      <div class="scroll-box">
        <template v-if="tableData.length == 0">
          <a-empty />
        </template>
        <template v-else>
          <div
            class="one-compare"
            v-for="item in tableData"
            @click="openDetail(item)"
          >
            <div class="compare-content">
              <p>{{ item.title }}</p>
              <p class="ctn">
                {{ item.contrastDesc }}
              </p>
            </div>
            <div class="operation-btn">
              <!-- <a-icon type="edit" class="edit" @click="editOne(item)" /> -->
              <a-icon
                type="delete"
                class="delete"
                @click.stop="deleteOne(item)"
              />
            </div>
          </div>
        </template>
      </div>
      <div class="content-footer">
        <Pagination
          :page.sync="pagination.page"
          :pageSize.sync="pagination.pageSize"
          :total.sync="total"
          @paginationChange="getTableList"
        />
      </div>
    </div>

    <!-- 添加对比 -->
    <a-drawer
      placement="top"
      :closable="false"
      :visible="addVisible"
      height="100%"
      wrapClassName="add-power"
      @close="closeTopDrawer"
      :destroyOnClose="true"
      :headerStyle="{
        background: '#f0f1f5',
        padding: '0 0.2rem 0 0.3rem',
        flexGrow: 0,
      }"
      :bodyStyle="{
        padding: '0.3rem 0 0 0',
        flexGrow: 1,
      }"
      :drawerStyle="{
        display: 'flex',
        flexDirection: 'column',
      }"
    >
      <template #title>
        <div class="head-box">
          <span>添加新对比</span>
          <div class="head-btn">
            <a-button @click="closeTopDrawer">取消</a-button>
            <a-button
              type="primary"
              class="save-btn"
              :disabled="chooseList.length == 0 || form.title == ''"
              @click="savePlan"
              >保存</a-button
            >
          </div>
        </div>
      </template>
      <a-form-model
        class="form-box"
        ref="ruleForm"
        :model="form"
        :rules="rules"
      >
        <div class="content-box">
          <div class="center-box">
            <div class="center-head">
              <a-form-model-item label="名称" required>
                <a-input
                  placeholder="请输入名称"
                  v-model="form.title"
                ></a-input>
              </a-form-model-item>
              <a-form-model-item label="描述">
                <a-input
                  placeholder="请输入描述"
                  v-model="form.contrastDesc"
                ></a-input>
              </a-form-model-item>
            </div>
            <div class="two-box">
              <div class="one-content border-right">
                <!-- <div class="top-content">
                  <div class="head-title">请选择要对比的对象</div>
                  <div class="obj-type">
                    <span>对象类型</span>
                    <div class="type-box">
                      <myDrop
                        class="drop"
                        placement="bottomLeft"
                        :defaultFlag.sync="defaultFlag"
                        :dropdownList="dropdownList"
                      ></myDrop>
                    </div>
                  </div>
                </div> -->
                <div class="data-list">
                  <a-form-model-item>
                    <div class="list-box">
                      <a-checkbox-group v-model="chooseList" @change="onChange">
                        <a-row v-for="item in chooseListMsg">
                          <a-checkbox
                            :value="item.id + 'split' + item.stationName"
                            :checked="item.checked"
                            @change="(e) => checkChange(e, item)"
                          >
                            {{ item.stationName }}
                          </a-checkbox>
                        </a-row>
                      </a-checkbox-group>
                    </div>
                  </a-form-model-item>

                  <div class="bottom-page">
                    <a-checkbox
                      :indeterminate="indeterminate"
                      :checked="checkAll"
                      @change="onCheckAllChange"
                    >
                      全选
                    </a-checkbox>
                    <!-- <Pagination
                      :page.sync="pagination.page"
                      :pageSize.sync="pagination.pageSize"
                      :total.sync="total"
                      @paginationChange="getStationList"
                    /> -->
                  </div>
                </div>
              </div>
              <div class="one-content border-left">
                <div class="head-title">显示方式</div>
                <div class="show-right">
                  <div class="one-choose" v-for="item in chooseList">
                    <div class="circle"></div>
                    <div class="msg-text">{{ item.split("split")[1] }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-form-model>
    </a-drawer>
    <a-modal
      title="对比详情"
      :visible="detailVisible"
      @ok="detailOk"
      @cancel="detailCancel"
      width="55%"
    >
      <div>
        <span>对比日期：</span>
        <a-date-picker
          @change="onChange"
          v-model="compareTime"
          :allowClear="false"
        />
      </div>
      <div class="echarts-box" id="compareEcharts"></div>
    </a-modal>
  </div>
</template>
<script>
import {
  contrastList,
  adContrast,
  deleteContrast,
  querySingleContrast,
} from "@/api/compare.js";
import { allStationList } from "@/api/powerStation.js";
import { lineEcharts } from "./config/compareEcharts";
import moment from "moment";
export default {
  data() {
    return {
      tableData: [],
      columns: [],
      total: 0,
      addVisible: false,
      dropdownList: [
        {
          value: "1",
          label: "电站",
        },
        {
          value: "2",
          label: "设备",
        },
      ],
      defaultFlag: "1",
      indeterminate: false,
      checkAll: false,
      chooseList: [],
      chooseListMsg: [],
      pagination: {
        page: 1,
        pageSize: 50,
      },
      form: {
        title: "",
        contrastDesc: "",
        contrastStationEntities: [],
      },
      rules: {
        title: [
          {
            required: true,
            message: "请填写名称",
            trigger: "blur",
          },
        ],
      },
      editData: [],
      detailVisible: false,
      compareTime: moment(),
      currentData: null,
    };
  },
  methods: {
    onSearch() {},
    openTopDrawer() {
      this.addVisible = true;
      this.getStationList();
    },
    getTableList(pageMsg) {
      let requestPage = {
        page: 1,
        limit: 50,
      };
      if (pageMsg?.page) {
        requestPage.page = pageMsg.page;
        requestPage.limit = pageMsg.pageSize;
      }
      contrastList(requestPage).then((res) => {
        console.log(res);
        this.tableData = res.data;
        this.total = res.count;
      });
    },
    closeTopDrawer() {
      this.addVisible = false;
      this.resetForm();
    },
    savePlan() {
      this.form.contrastStationEntities = this.chooseList.map((item) => {
        return {
          stationId: item.split("split")[0],
        };
      });
      adContrast({ ...this.form }).then((res) => {
        this.getTableList();
        this.resetForm();
        this.addVisible = false;
      });
    },
    onCheckAllChange(e) {
      this.indeterminate = false;
      this.checkAll = e.target.checked;
      this.chooseList = e.target.checked
        ? this.chooseListMsg.map((item) => {
            return item.id + "split" + item.stationName;
          })
        : [];
    },
    checkChange(e, item) {
      item.checked = e.target.checked;
    },
    getStationList(data) {
      let requestData = {
        page: 1,
        limit: 100,
      };
      console.log(data);
      if (data?.page) {
        requestData.page = data.page;
        requestData.limit = data.pageSize;
      }
      allStationList(requestData).then((res) => {
        res.data.forEach((item) => {
          item.checked = false;
        });
        this.chooseListMsg = res.data;
      });
    },
    onChange(checkedList) {
      this.indeterminate =
        !!checkedList.length && checkedList.length < this.chooseListMsg.length;
      this.checkAll = checkedList.length === this.chooseListMsg.length;
    },
    resetForm() {
      this.form.title = "";
      this.contrastDesc = "";
      this.contrastStationEntities = [];
      this.chooseList = [];
    },
    deleteOne(item) {
      this.$confirm({
        title: `确认删除${item.title}?`,

        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        onOk: () => {
          deleteContrast({ id: item.id }).then((res) => {
            this.$message.success("删除成功");
            this.getTableList();
          });
        },
        onCancel: () => {},
      });
    },
    editOne(item) {
      querySingleContrast({ id: item.id }).then((res) => {
        console.log(res);
      });
    },

    openDetail(row) {
      this.detailVisible = true;
      this.currentData = row;
      this.getDetailCompare();
    },
    getDetailCompare() {
      querySingleContrast({
        id: this.currentData.id,
        startTime: moment(this.compareTime).format("YYYY-MM-DD 00:00:00"),
        endTime: moment(this.compareTime).format("YYYY-MM-DD 00:00:00"),
      }).then((res) => {
        let compareData = res.data;
        let lengd = [];
        let seriesData = [];
        if (compareData.contrast) {
          delete compareData.contrast;
        }
        let minTime = moment(this.compareTime).startOf("day").valueOf();
        let maxTime = moment(this.compareTime).endOf("day").valueOf();
        if (Object.keys(compareData).length > 0) {
          for (let k in compareData) {
            compareData[k].forEach((item) => {
              if (lengd.length == 0) {
                lengd.push(
                  ...[
                    item.stationName + "发电总功率",
                    item.stationName + "发电量",
                  ]
                );
                seriesData.push(
                  ...[
                    {
                      name: item.stationName + "发电总功率",
                      type: "line",
                      data: [],
                      yAxisIndex: 0,
                    },
                    {
                      name: item.stationName + "发电量",
                      type: "line",
                      data: [],
                      yAxisIndex: 1,
                    },
                  ]
                );
              }
              seriesData.forEach((series) => {
                if (series.name == item.stationName + "发电总功率") {
                  series.data.push([k, item.allActivePower]);
                }
                if (series.name == item.stationName + "发电量") {
                  series.data.push([k, item.dayPower]);
                }
              });
            });
          }
        }
        seriesData.forEach((item) => {
          item.data.sort((a, b) => {
            return moment(a[0]).valueOf() - moment(b[0]).valueOf();
          });
        });
        this.$nextTick(() => {});
        setTimeout(() => {
          this.initEcharts({ minTime, maxTime }, lengd, seriesData);
        }, 0);
        console.log(lengd, seriesData);
      });
    },
    detailOk() {
      this.detailVisible = false;
    },
    detailCancel() {
      this.detailVisible = false;
    },
    onChange() {
      this.getDetailCompare();
    },
    initEcharts(time, lengd, data) {
      const ecDom = document.getElementById("compareEcharts");
      const initDom = this.echarts.init(ecDom);
      initDom.setOption(lineEcharts(time, lengd, data));
    },
  },
  mounted() {
    this.getTableList();
  },
};
</script>
<style lang="less" scoped>
.max-box {
  width: 100%;
  height: 100%;
  padding-top: 16px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-right: 20px;
    margin-bottom: 16px;
    .header-left {
      span {
        font-size: 18px;
        color: #252b3a;
      }
      i {
        font-size: 20px;
      }
    }
    .search-box {
      width: 240px;
      height: 32px;
      /deep/.ant-input {
        font-size: 12px;
      }
    }
    .add-btn {
      font-size: 12px;
    }
  }
  .content-box {
    background: #fff;
    width: 100%;
    flex-grow: 1;
    box-sizing: border-box;
    // overflow-y: auto;
    display: flex;
    flex-direction: column;
    .scroll-box {
      flex-grow: 1;
      width: 100%;
      box-sizing: border-box;
      padding: 16px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 16px;
      .one-compare {
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        height: max-content;
        cursor: pointer;
        color: #515561;
        font-size: 12px;
        transition: all 0.3s;
        &:hover {
          color: #048fff;
          border-color: #048fff;
        }
        .compare-content {
          height: 90px;
          padding: 16px;
          .ctn {
            color: #00000073;
          }
        }
        .operation-btn {
          height: 34px;
          padding: 8px 0;
          display: flex;
          justify-content: flex-end;
          .edit {
            &:hover {
              color: #048fff;
            }
          }
          .delete {
            &:hover {
              color: #ff7875;
            }
          }
          i {
            font-size: 18px;
            color: rgba(0, 0, 0, 0.45);
            margin-right: 16px;
          }
        }
      }
    }
    .content-footer {
      width: 100%;
      height: 48px;
      box-sizing: border-box;
      border-top: 1px solid rgba(0, 0, 0, 0.04);
      padding: 12px 16px;
    }
  }
}
.add-power {
  .head-box {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 20px;
      color: #252b3a;
    }
    .head-btn {
      .ant-btn {
        height: 32px;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
  .form-box {
    width: 100%;
    height: 100%;
    .content-box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      .center-box {
        width: 90%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .center-head {
          display: flex;
          justify-content: space-between;
          .ant-form-item {
            width: 45%;
            margin-bottom: 10px;
            /deep/.ant-form-item-label {
              line-height: 24px;
              font-size: 14px;
            }
            input {
              width: 100%;
              font-size: 14px;
            }
          }
        }
        .two-box {
          display: flex;
          flex-grow: 1;
          justify-content: space-between;
          margin-top: 16px;
          .one-content {
            width: 40%;
            height: 100%;
            display: flex;
            flex-direction: column;
            .top-content {
              .head-title {
                font-size: 16px;
                color: #515561;
                display: flex;
                align-items: center;

                &::before {
                  content: "";
                  width: 4px;
                  height: 13px;
                  background: #048fff;
                  margin-right: 4px;
                }
              }
              .obj-type {
                display: flex;
                flex-direction: column;
                margin-top: 20px;
                span {
                  font-size: 12px;
                  color: #00000073;
                }
                .type-box {
                  margin-top: 12px;
                  .drop {
                    width: 130px;
                  }
                }
              }
            }
            .data-list {
              flex-grow: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-top: 20px;
              .bottom-page {
                height: 64px;
                width: 100%;
                padding: 20px 20px 20px 0;
                border-top: 1px solid rgba(0, 0, 0, 0.1);
              }
            }
            .show-right {
              flex-grow: 1;
              padding: 8px 8px 0 16px;
              overflow-y: auto;
              margin-top: 16px;
              .one-choose {
                padding-bottom: 8px;
                margin: 8px 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                display: flex;
                align-items: center;
                .circle {
                  width: 4px;
                  height: 4px;
                  background: #fff;
                  border-radius: 50%;
                  box-sizing: content-box;
                  border: 3px solid #048fff;
                }
                .msg-text {
                  margin-left: 8px;
                  font-size: 14px;
                  color: #515561;
                }
              }
            }
          }
          .border-right {
            border-right: 1px solid rgba(0, 0, 0, 0.1);
          }
          .border-left {
            border-left: 1px solid rgba(0, 0, 0, 0.1);
            padding-left: 20px;
          }
        }
      }
    }
  }
}
.echarts-box {
  width: 100%;
  height: 550px;
}
</style>
